import {Avatar, Tooltip} from "antd";
import {
    CodepenOutlined,
    FolderOpenOutlined,
    GlobalOutlined,
    HeartOutlined, InfoCircleOutlined, MenuOutlined, MobileOutlined,
    UserOutlined,
    WechatOutlined
} from "@ant-design/icons";
import {useDispatch, useSelector} from "react-redux";
import {setUserName} from "@/libs/helpers.js";

const ToolColumn = () => {
    const state = useSelector(state => state)
    const dispatch = useDispatch()

    const avatarStr = state.userName.substring(0, 1)

    // const clearUserName = () => setUserName('')
    const clearUserName = () => location.reload()

    return (
        <div className="w-full h-full flex items-center flex-col">
            <div className="pt-9">
                <Tooltip placement="left" title="点击重新设置用户名">
                    <Avatar className="cursor-pointer"
                            onClick={clearUserName}
                            shape="square">{avatarStr}</Avatar>
                </Tooltip>
            </div>
            <div className="flex flex-col justify-between h-full">
                <div className="flex flex-col">
                    <WechatOutlined className="text-xl pb-3 pt-6" style={{color: '#07c160'}}/>
                    <UserOutlined className="text-xl py-3" style={{color: '#f5f5f5'}}/>
                    <CodepenOutlined className="text-xl py-3" style={{color: '#f5f5f5'}}/>
                    <FolderOpenOutlined className="text-xl py-3" style={{color: '#f5f5f5'}}/>
                    <GlobalOutlined className="text-xl py-3" style={{color: '#f5f5f5'}}/>
                    <HeartOutlined className="text-xl py-3" style={{color: '#f5f5f5'}}/>
                </div>

                <div className="flex flex-col">
                    <InfoCircleOutlined className="text-xl py-3" style={{color: '#f5f5f5'}}/>
                    <MobileOutlined className="text-xl py-3" style={{color: '#f5f5f5'}}/>
                    <MenuOutlined className="text-xl py-3" style={{color: '#f5f5f5'}}/>
                </div>
            </div>
        </div>
    )
}

export default ToolColumn